<template>
	<view class="filter-con">
		<view class="columns year" @click="yearShow = true">
			{{year}}
		</view>
		<view class="columns mouth" @click="monthShow = true">
			{{month}}
		</view>
		<view class="columns day" @click="dayShow = true">
			{{day}}
		</view>
		<u-picker :show="yearShow" :defaultIndex="defaultYearIndex" @cancel="closeYear" @confirm="confirmYear"
			:columns="years"></u-picker>
		<u-picker :show="monthShow" :defaultIndex="defaultMonthIndex" @cancel="closeMonth" @confirm="confirmMonth"
			:columns="months"></u-picker>
		<u-picker :show="dayShow" :defaultIndex="defaultDayIndex" @cancel="closeDay" @confirm="confirmDay"
			:columns="days"></u-picker>
	</view>
</template>

<script>
	const date = new Date()
	const years = []
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}
	export default {

		data() {
			return {

				yearShow: false,
				monthShow: false,
				dayShow: false,
				years: [years],
				months: [months],
				days: [days],
				year,
				month: month < 10 ? 0 + '' + month : month,
				day: day < 10 ? 0 + '' + day : day,
				defaultYearIndex: [years.length],
				defaultMonthIndex: [month - 1],
				defaultDayIndex: [day - 1],
			}
		},
		onLoad(option) {

		},

		methods: {

			confirmYear(e) {
				this.yearShow = false
			},
			confirmMonth() {
				this.monthShow = false
			},
			confirmDay() {
				this.dayShow = false
			},
			closeYear() {
				this.yearShow = false
			},
			closeMonth() {
				this.monthShow = false
			},
			closeDay() {
				this.dayShow = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.filter-con {
		height: 126rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 0 0;
		position: relative;
		margin-top: -8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #f5f5f5;

		.columns {
			width: 170rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			border: 1rpx solid #C0C4CC;
			margin: 0 42rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #909399;
		}
	}
</style>
